<template>
  <div style="display: flex;margin: 20px;">
	<div style="width: 45%;margin-left: 18%;">	
		<!-- 中间的左边博客列表 -->
		<div class="eleven wide column">
			<!--头部-->
			<div class="ui top attached segment">
				<div class="ui middle aligned two column grid">
					<div class="column">
						<h2 class="ui teal header">{{this.$store.state.store_find_type}}</h2>
					</div>
					<div class="right aligned  column" style="font-size: 20px;">
						共 <a style="font-size: 25px;">{{blog_sum}}</a> 篇
					</div>
				</div>
			</div>
			<!--文章显示列表-->
			<div class="ui attached segment" v-for="(item,index) in blog">
				<div class="ui padded vertical m-padded-tb-large segment" @click="blog_article(item)">
					<div class="ui grid stackable mobile reversed ">
						<!--文章显示列表   内容-->
						<div class="eleven wide column">
							<h3 class="ui header">{{item.title}}</h3>
							<p class="m-text">{{item.desc_}}</p>
							<div class="ui grid">
								<div class="eleven wide column">
									<div class="ui link list horizontal mini">
										<div class="item">
											<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="" class="ui avatar image">
											<div class="content"><a class="header">{{item.user_id}}</a></div>
										</div>
										<div class="item">
											<i class="calendar icon"></i> {{item.time_}}
										</div>
										<div class="item">
											<i class="eye icon"></i> {{item.view_}}
										</div>
									</div>
								</div>
								<div class="five wide column">
									<a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">{{item.type_}}</a>
								</div>
							</div>
						</div>
						<!--文章显示列表   图片-->
						<div class="right aligned five wide column">
							<a target="_blank">
								<img :src="url[index]" alt="" class="ui rounded image">
							</a>
						</div>
					</div>
				</div>
			</div>
			<!--中间左边底部-->
			<div class="ui bottom attached segment">
				<!-- 实现分页的样式 -->
				<el-pagination
				  background
				  layout="prev, pager, next"
				  :page-size="Pagesize"
				  :total="blog_sum"
				  @current-change="page123">
				</el-pagination>
			</div>
		</div>
	</div>
	<div style="width: 20%;">
		<div class="ui segments">
			<div class="ui secondary segment">
				<div class="ui two column grid">
					<div class="column">
						<i class="idea icon"></i>分类
					</div>
				</div>
			</div>
			<div class="ui teal segment">
				<div class="ui fluid vertical menu">
					<a v-for="(item,index) in types" class="item" @click="click_type(item)">
						{{item.type}}
						<div class="ui teal basic left pointing label">{{item.type_number}}</div>
					</a>
				</div>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
	export default{
		data(){
			return{
				//背景url
				url:[
					"https://images.unsplash.com/photo-1560258018-c7db7645254e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8c3ByaW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
					"https://images.unsplash.com/photo-1474524955719-b9f87c50ce47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDF8fG5hdHVyZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
					"https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGF1dHVtbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
					"https://images.unsplash.com/photo-1453306458620-5bbef13a5bca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHdpbnRlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
					"https://images.unsplash.com/photo-1491582990992-68ec88e070a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODN8fGxvdmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
				],
				
				//只有5篇博文!!!
				blog:[
					{time_:"2021-11-23 20:44:11",title:"测试测试测试测试测试测试测试测试",view_:0,resource:"转载",tag_jump:["java","Mysql","数据库"],type_:"计算机",user_id:"admin",desc_:"hahahahhahaahahahahahahah"},
				    {time_:"2021-11-23 20:44:11",title:"测试测试测试测试测试测试测试测试",view_:0,resource:"转载",tag_jump:["java","Mysql","数据库"],type_:"计算机",user_id:"admin",desc_:"hahahahhahaahahahahahahah"},
					{time_:"2021-11-23 20:44:11",title:"测试测试测试测试测试测试测试测试",view_:0,resource:"转载",tag_jump:["java","Mysql","数据库"],type_:"计算机",user_id:"admin",desc_:"hahahahhahaahahahahahahah"},
					{time_:"2021-11-23 20:44:11",title:"测试测试测试测试测试测试测试测试",view_:0,resource:"转载",tag_jump:["java","Mysql","数据库"],type_:"计算机",user_id:"admin",desc_:"hahahahhahaahahahahahahah"},
					{time_:"2021-11-23 20:44:11",title:"测试测试测试测试测试测试测试测试",view_:0,resource:"转载",tag_jump:["java","Mysql","数据库"],type_:"计算机",user_id:"admin",desc_:"hahahahhahaahahahahahahah"}
				],
				blog_sum:0,
				Pagesize: 5,
				types:[
					{type:"美文",type_number:12},
					{type:"计算机",type_number:25},
					{type:"医学",type_number:9},
					{type:"动漫",type_number:2},
				],
			}
		},
		methods:{
			blog_article(item){
				//跳转到博客的详情页!!!!
				console.log(item)
				sessionStorage.setItem("blog_id",item.id)
				this.$router.push({path: "/blog_artile"});
			},
			//分页查询
			page123(currentPage){
				var that=this
				//分页获得博客!!!!
				axios.get("http://"+that.$store.state.host+":8181/blog/LimitTypeFindBlog/"+currentPage+"/"+that.Pagesize+"/"+that.$store.state.store_find_type).then(function(res){
					// console.log(res.data)
					that.blog=res.data.map.data
					that.blog_sum=res.data.map.countBlog
				});
			},
			//点击分类中的某个分类项进行跳转
			click_type(item){
				var that=this
				//console.log(item)
				this.$store.state.store_find_type=item.type
				//分页获得博客!!!!
				axios.get("http://"+that.$store.state.host+":8181/blog/LimitTypeFindBlog/"+1+"/"+that.Pagesize+"/"+that.$store.state.store_find_type).then(function(res){
					// console.log(res.data)
					that.blog=res.data.map.data
					that.blog_sum=res.data.map.countBlog
				});
			}
		},
		//初始化博客操作!!!!!
		created() {
			var that=this
			//分页获得博客!!!!
			axios.get("http://"+that.$store.state.host+":8181/blog/LimitTypeFindBlog/"+1+"/"+that.Pagesize+"/"+that.$store.state.store_find_type).then(function(res){
				// console.log(res.data)
				that.blog=res.data.map.data
				that.blog_sum=res.data.map.countBlog
			});
			//获得所有的分类
			axios.get("http://"+that.$store.state.host+":8181/type/findAllType").then(function(res){
				that.types=res.data.map.data
			});
		}
	}
</script>

<style>
	.home_middle_head{
		display: flex;
		line-height: 3em;
		border-style:solid ;
		border-width:1px;
		border-color: #afc2b8;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		height: 3em;
		color: #8cfffb;
	}
	.home_middle_contem{
		border-style:solid ;
		border-width:1px;
		border-color: #afc2b8;
	}
	.blog_head{
		display: flex;
		text-align: center;
		height: 3em;
	/* 	justify-content: center; */
		margin: 0 auto;
	}
	.font_desc{
		word-break: break-all;
	}
</style>
